<template>
  <div class="level">
    <h1>医院</h1>
    <div class="content">
        <div class="left">等级：</div>
        <ul class="hospital">
            <li :class="{active:activeFlag==''}">全部</li>
            <li v-for="item in level" :key="item.id" :class="{active:activeFlag== item.value}" @click="changeActive(item.value)">{{ item.name }}</li>
        </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqHospitalLevelAndRegion } from '@/api/home';
import type { HospitalLevelAndRegionArr, HospitalLevelAndRegionResponseData } from '@/api/home/type';
import { ref, onMounted } from 'vue';

const $emit = defineEmits(['getLevel']);

let level =ref<HospitalLevelAndRegionArr>([]);

// 控制等级高亮
let activeFlag = ref<string>('');
const changeActive = (level:string) => {
    activeFlag.value = level; 

    $emit('getLevel', level);
}

const getLevel = async () => {
    let res:HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('Hostype')
    
    if (res.code === 200) {
        level.value = res.data;
    }
}

onMounted(()=>{
    getLevel();
})

</script>

<style scoped lang="scss">
.level {
    color: #7f7f7f;
    margin-bottom: 10px;
    h1 {
        font-weight: 900;
        margin: 10px 0px;
        font-size: 18px;
    }

    .content {
        display: flex;

        .left {
            margin-right: 10px;
            width: 50px;
        }
        
        .hospital {
            display: flex;
            padding: 0px;
            margin: 0px;
            
            li{
                list-style: none;
                margin-right: 10px;

                &.active{
                    color: #55a6fe;
                }
            }
            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>